<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
        <title>Welcome to Design Zone......</title>
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/file-upload.css" />
        <link rel="stylesheet" type="text/css" href="../../styles/dzbase.css" />
        <script type="text/javascript" src="../../scripts/ext/adapter/ext-base.js">
        </script>
        <script type="text/javascript" src="../../scripts/ext/ext-all.js">
        </script>
		<script type="text/javascript" src="../../scripts/menu/EditableItem.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/RangeMenu.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/GridFilters.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/Filter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/StringFilter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/ListFilter.js">
        </script>
		<script type="text/javascript" src="../../scripts/grid/filter/DateFilter.js">
        </script>
		<script type="text/javascript" src="../../scripts/grid/RowExpander.js">
        </script>
        <script type="text/javascript" src="../../scripts/i18nMessage.js">
        </script>
        <script type="text/javascript" src="../../scripts/utils.js">
        </script>
		<script type="text/javascript" src="../../scripts/multiSelectProductIdentification.js">
        </script>
        <script type="text/javascript">
            var pMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.procurement');
            var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
			var piMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.productidentification');
			var fcMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.francecustomer');
			var referenceMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.reference');
            
            var ctYesnoXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtYesno');
            
            var pId = getPrarmeterValue(window.location, 'id');
            var startPage = getPrarmeterValue(window.location, 'startPage');
            
            var pXMLReader = new Ext.data.XmlReader({
                record: 'item'
            }, [{
                name: 'id',
                mapping: 'id'
            }, {
                name: 'name',
                mapping: 'name'
            }, {
                name: 'isFinished',
                mapping: 'isFinished'
            }, {
                name: 'createTime',
                mapping: 'createTime'
            }, {
                name: 'comment',
                mapping: 'comment'
            }]);
            
            var xmlLoader = new xmlLoader('../../servlet/ProcurementServlet?action=3&id=' + pId);
            
            var pRecord = pXMLReader.readRecords(xmlLoader.getXml()).records[0];
            var itemTplMarkup = ['<table cellspacing="0" id="the-table" style="width: 100%;"><tbody>', '<tr><td style="background:#eeeeee; width: 15%;">', message.get('message.list.id'), '</td><td>{id}</td>', '<td style="background:#eeeeee;width: 15%;">', pMessage.get('ui.procurement.name'), '</td><td>{name}</td>', '<td style="background:#eeeeee;">', pMessage.get('ui.procurement.isfinished'), '</td><td id="isFinishedTd">{isFinished}</td><td style="background:#eeeeee;">', message.get('message.edit.createdate') + '(d/m/Y)', '</td><td>{createTime}</td></tr>', '<tr><td style="background:#eeeeee;">', message.get('message.edit.comment'), '</td><td colspan="7">{comment}</td></tr>', '</tbody></table>'];
            var itemTpl = new Ext.Template(itemTplMarkup);
            
            function renderIsFinished(value){
                if (value == '02') 
                    return String.format('<img ext:qtip="{0}" src="../../images/icons/cross.png" />', message.get('message.list.no'));
                else 
                    return String.format('<img ext:qtip="{0}" src="../../images/icons/tick.png"/>', message.get('message.list.yes'));
            }
			
			var procurementItemStore;
			var procurementItemGrid;
            
            Ext.onReady(function(){
                Ext.QuickTips.init();
                Ext.form.Field.prototype.msgTarget = 'side';
                
                itemTpl.append('procurement', pRecord.data);
                
                var isFinishedTd = document.getElementById('isFinishedTd').innerHTML;
                document.getElementById('isFinishedTd').innerHTML = renderIsFinished(isFinishedTd);
                
                var procurementItemForm = new Ext.FormPanel({
                    labelAlign: 'left',
					url: '../../servlet/ProcurementServlet?action=100&id=' + pId,
                    frame: true,
                    title: pMessage.get('ui.procurement.edittitle'),
                    bodyStyle: 'padding:5px 5px 5px 5px;margin-top: 2px;',
                    width: '100%',
                    labelWidth: 250,
                    reader: new Ext.data.XmlReader({
                        record: 'item'
                    }, [{
                        name: 'id',
                        mapping: 'id'
                    }, {
                        name: 'name',
                        mapping: 'name'
                    }, {
                        name: 'isFinished',
                        mapping: 'isFinished'
                    }, {
                        name: 'comment',
                        mapping: 'comment'
                    }]),
                    items: [{
						xtype: 'hidden',
						id: 'ids',
						name: 'ids'						
					},{
                        xtype: 'textfield',
                        fieldLabel: '(' + piMessage.get('ui.productidentification.seasonnumber') + ', ' + referenceMessage.get('ui.reference.reference') + ', ' + piMessage.get('ui.productidentification.patronagenumer') + ', ' + piMessage.get('ui.productidentification.ordernumber') + ')',
                        name: 'name',
						id: 'name',
                        anchor: '86%',
                        allowBlank: false,
                        blankText: message.get('message.edit.noblank'),
						readOnly: true,
						emptyText: message.get('message.combo.pleaseselect'),
                        listeners: {
                            'render': {
                                fn: function(){
                                    Ext.getCmp('name').getEl().on('click', function(){
                                        selectProductIdentification();
                                    }, this);
                                },
                                scope: this
                            }
                        }
                    }],
			
			        buttons: [{
			            text: message.get('message.edit.save'),
						handler: function(){
                            if (procurementItemForm.getForm().isValid()) {
                                procurementItemForm.getForm().submit({
                                    method: 'post',
                                    success: function(form, action){
										procurementItemStore.reload();
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.successful'));
                                        procurementItemForm.getForm().reset();
                                    },
                                    failure: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.unsuccessful'));
                                    }
                                });
                            }
                        }
			        },{
						text: message.get('message.edit.reset'),
						handler: function(){
							procurementItemForm.getForm().reset();
						}
					},{
			            text: message.get('message.edit.cancel'),
                        handler: function(){
                            if (startPage != null) {
                                window.location = 'procurement_list.html?startPage=' + startPage;
                            }else {
                                window.location = 'procurement_list.html';
                            }
                        }
			        }]
			    
                });
				
				procurementItemForm.render('procurementItemForm');
				
				var piFilters = new Ext.grid.GridFilters({
					  filters:[
					    {type: 'string',  dataIndex: 'biReference.reference'},
						{type: 'string',  dataIndex: 'seasonNumber'},
						{type: 'string',  dataIndex: 'biFranceCustomer.name'},
						{type: 'string',  dataIndex: 'model'},
						{type: 'string',  dataIndex: 'chartVersion'},
						{type: 'string',  dataIndex: 'patronageNumer'}
				]});
				
				var piExpander = new Ext.grid.RowExpander({
			        tpl : new Ext.Template(
						'<p><b>' + piMessage.get('ui.productidentification.ordernumber') + ':</b> {orderNumber} &nbsp;&nbsp;&nbsp;&nbsp;<b>' + piMessage.get('ui.productidentification.dhl') + ':</b> {dhlNumber} &nbsp;&nbsp;&nbsp;&nbsp;</p><br/>',
			            '<p><b>' + referenceMessage.get('ui.reference.front') + ':</b> {front} &nbsp;&nbsp;&nbsp;&nbsp; <b>' + referenceMessage.get('ui.reference.back') + ':</b> {back}&nbsp;&nbsp;&nbsp;&nbsp;',
						'<b>' + referenceMessage.get('ui.reference.sleeves') + ':</b> {sleeves} &nbsp;&nbsp;&nbsp;&nbsp; <b>' + referenceMessage.get('ui.reference.bottomthrum') + ':</b> {bottomThrum}&nbsp;&nbsp;&nbsp;&nbsp;',
						'<b>' + referenceMessage.get('ui.reference.sleevesthrum') + ':</b> {sleevesThrum} &nbsp;&nbsp;&nbsp;&nbsp; <b>' + referenceMessage.get('ui.reference.necklinethrum') + ':</b> {necklineThrum}&nbsp;&nbsp;&nbsp;&nbsp;</p><br/>',
			            '<p><b>' + referenceMessage.get('ui.reference.needle') + ':</b> {needle} &nbsp;&nbsp;&nbsp;&nbsp; <b>' + referenceMessage.get('ui.reference.machinetype') + ':</b> {ctMachineType}&nbsp;&nbsp;&nbsp;&nbsp;',
						'<b>' + referenceMessage.get('ui.reference.weight') + ':</b> {weight} &nbsp;&nbsp;&nbsp;&nbsp; <b>',// + piMessage.get('ui.productidentification.yarnnumber') + ':</b> {yarnNumber}&nbsp;&nbsp;&nbsp;&nbsp;',
						'</p><br/>',
						'<p><img src="../../_temp/{chartName}" width="150px"/> &nbsp;&nbsp;&nbsp;&nbsp;<img src="../../_temp/{photoName}" width="150px"/>',
						//&nbsp;&nbsp;&nbsp;&nbsp;<img src="../../_temp/{frontPhotoName}" width="150px"/>&nbsp;&nbsp;&nbsp;&nbsp;<img src="../../_temp/{backPhotoName}" width="150px"/>&nbsp;&nbsp;&nbsp;&nbsp;<img src="../../_temp/{otherPhotoName}" width="150px"/></p><br/>',
						'<br/><br/><p><b>' + piMessage.get('ui.productidentification.comment') + ':</b> {comment}</p><br/>'
			        )
			    });
				
				procurementItemStore = new Ext.data.Store({
                    url: '../../servlet/ProcurementServlet?action=101&&id=' + pId,
			        reader: new Ext.data.XmlReader({
			            record: 'item',
			            id: 'id',
			            totalRecords: 'itemTotal'
			        }, [ 
			         'index', 'id', 'ctProductFamily', 'biMeasureSpecificationId',
					'ctMachineType', 'type', 'orderNumber',
					 'yarnNumber', 'dhlNumber', 'ctDesignType',
					 'style', 'customerLinkman', 'model', 
					 'ctSeasonNumber', 'createDate', 'reference',
					 'ctVersion', 'patronageNumer', 'front', 
					 'back', 'sleeves', 'bottomThrum', 
					 'sleevesThrum', 'necklineThrum', 'needle', 
					 'weight', 'comment', 'photoName', 'frontPhotoName','backPhotoName','otherPhotoName',
					 'chartName', 'modifyDate', 
					 'isSimilary', 'isNewfashioned', 'isDifficulty', 
					 'dhlNumber', {name: 'biFranceCustomer.name', mapping: 'customerName'},
					 {name: 'biFranceCustomer.department', mapping: 'customerDepartment'},'isTagged','isYarned', 'isOrdered', 'isButtoned', 'isZipped', 'isAo']),
                    
			        remoteSort: true
			    });
				
				procurementItemStore.setDefaultSort('id', 'desc');
				
				procurementItemGrid = new Ext.grid.GridPanel({
			        title: piMessage.get('ui.productidentification.listtitle'),
			        store: procurementItemStore,
			        stripeRows: true,
			        plugins: [piExpander],
			        height: 560,
			        columns: [piExpander, {
                        header: message.get('message.list.id'),
                        width: 50,
                        dataIndex: 'index',
                        sortable: false
                    }, {
                        header: fcMessage.get('ui.francecustomer.name'),
                        dataIndex: 'biFranceCustomer.name',
                        sortable: true
                    }, {
                        header: fcMessage.get('ui.francecustomer.department'),
                        dataIndex: 'biFranceCustomer.department',
                        sortable: true
                    },{
                        header: piMessage.get('ui.productidentification.style'),
                        dataIndex: 'style',
                        sortable: true
                    },{
                        header: message.get('message.edit.productfamily'),
                        dataIndex: 'ctProductFamily',
                        sortable: true
                    },{
                        header: piMessage.get('ui.productidentification.designtype'),
                        dataIndex: 'ctDesignType',
                        sortable: true
                    },{
                        header: referenceMessage.get('ui.reference.reference'),
                        dataIndex: 'reference',
                        sortable: true
                    },{
                        header: piMessage.get('ui.productidentification.seasonnumber'),
                        dataIndex: 'ctSeasonNumber',
                        sortable: true
                    },{
                        header: piMessage.get('ui.productidentification.model'),
                        dataIndex: 'model',
                        sortable: true
                    },{
                        header: piMessage.get('ui.productidentification.chartversion'),
                        dataIndex: 'ctVersion',
                        sortable: true
                    },{
                        header: piMessage.get('ui.productidentification.patronagenumer'),
                        dataIndex: 'patronageNumer',
                        sortable: true
                    },{
                        header: message.get('message.edit.createdate'),
                        dataIndex: 'createDate',
                        sortable: true
                    },{
                        header: message.get('message.edit.modifydate'),
                        dataIndex: 'modifyDate',
                        sortable: true
                    },{
                        header: message.get('message.edit.output'),
                        width: 50,
                        dataIndex: 'id',
                        sortable: false,
                        renderer: renderReport
                    },{
                        header: message.get('message.list.delete'),
                        width: 50,
                        dataIndex: 'id',
                        sortable: false,
                        renderer: renderDelete
                    }],
			        viewConfig: {
			            forceFit: true
			        },
			        loadMask: true,
			        renderTo: 'procurementItemGird'
				});
				
				procurementItemStore.load();
                
            });
			
			var selectProductIdentificationCallBack = function(selectedIds, selectedRecords){
				document.getElementById('ids').value = selectedIds;
				document.getElementById('name').value = selectedRecords;
			};
			
			var deleteCallback = function(btn){
                if (btn == 'yes') {
                    Ext.Ajax.request({
                        url: '../../servlet/ProcurementServlet?action=102&id=' + deleteId,
                        success: function(o){
                            if (o.responseText == 'success') {
                                procurementItemStore.reload();
                                messageTip.msg(message.get('message.tip'), message.get('message.delete.successful'));
                            }
                            else {
                                messageTip.msg(message.get('message.tip'), message.get('message.delete.unsuccessful'));
                            }
                        },
                        failure: function(o){
                            messageTip.msg(message.get('message.tip'), message.get('message.delete.failure'));
                        },
                        params: {
                            foo: 'bar'
                        }
                    });
                }
            }
			
			function renderDelete(value, p, record){
                return String.format('<a href="javascript: deleteItem(deleteCallback, {0});"><img src="../../images/icons/delete.png" title="' + message.get('message.list.delete') + '"/></a>', record.id);
            }
			
			
			function renderReport(value, p, record){
				return String.format('<a href="../product/product_identification_report.jsp?id={0}" target="_blank"><img src="../../images/icons/report.png" title="' + message.get('message.edit.output') + '" /></a>', record.id);
			}
        </script>
    </head>
    <body>
        <div id="procurement">
        </div>
		<div id="procurementItemForm">
        </div>
		<div id="procurementItemGird">
        </div>
    </body>
</html>
